<div class="inspection-container">
  <div class="inspection-head">
    <div class="head-left">
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{name}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        巡检记录
      </b>
    </div>
    <div class="head-right">
      <nz-select style="width: 190px;" [(ngModel)]="searchModel.type" name="type" nzPlaceHolder="检查类型" nzAllowClear>
        <!-- <nz-option nzValue="1" nzLabel="质量检查"></nz-option>
        <nz-option nzValue="2" nzLabel="安全检查"></nz-option>
        <nz-option nzValue="3" nzLabel="进度检查"></nz-option> -->
        <nz-option *ngFor="let option of checkOptionsList" [nzValue]="option" [nzLabel]="option.label"></nz-option>
      </nz-select>

      <nz-select style="width: 190px;margin: 0px 30px" [(ngModel)]="searchModel.status" name="status" nzAllowClear
        nzPlaceHolder="状态">
        <nz-option nzValue="1" nzLabel="整改中"></nz-option>
        <nz-option nzValue="2" nzLabel="已整改"></nz-option>
        <nz-option nzValue="3" nzLabel="已完成"></nz-option>
        <nz-option nzValue="4" nzLabel="已撤销"></nz-option>
      </nz-select>

      <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd " [(ngModel)]="formInfo.startValue" name="startValue"
        nzPlaceHolder="开始时间" (ngModelChange)="onStartChange($event)">
      </nz-date-picker>
      <span> - </span>
      <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd " [(ngModel)]="formInfo.endValue" name="endValue"
        nzPlaceHolder="结束时间" (ngModelChange)="onEndChange($event)">
      </nz-date-picker>

      <button (click)="getPageInfo()" nz-button [nzType]="'primary'" style="margin-left: 30px">搜索</button>
    </div>
  </div>
  <div class="inspection-body">
    <div class="body">
      <nz-table #rowSelectionTable [nzData]="recordList" [nzShowPagination]="false">
        <thead>
          <tr style="background-color: white">
            <!-- <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
              (nzCheckedChange)="checkAll($event)"></th> -->
            <th>序号</th>
            <th>检查类型</th>
            <th>检查性质</th>
            <th>检查人</th>
            <!-- <th>检查部门</th> -->
            <th>通知人</th>
            <th>检查日期</th>
            <th>整改期限</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of rowSelectionTable.data let i = index" (click)="getDetail(data.id)"
            style="cursor: pointer">
            <!-- <td (click)="$event.stopPropagation();" nzShowCheckbox [(nzChecked)]="data.checked"
              (nzCheckedChange)="refreshCheckboxStatus()"></td> -->
            <td>{{i+1}}</td>
            <td class="hidden-row ">{{ data.checkItemName }}</td>
            <td class="hidden-row "><span *ngFor="let item of data.securityChecksPropertyNames">{{item}}</span></td>
            <!-- <td class="hidden-row ">{{ data.type == 1 ? '质量检查' : data.type == 2 ? '安全检查' : '进度检查'}}</td> -->

            <td class="hidden-row "><span *ngFor="let person of data.checkUserNames">{{ person? person: "-" }} </span>
            </td>
            <!-- <td class="hidden-row "><span>{{ data.organizationUnitName ||"-" }} </span></td> -->
            <td class="hidden-row "><span *ngFor="let person of data.notifyUserNames">{{ person || "-"}} </span></td>
            <td class="hidden-row "
              [title]="data.creationTime == '1970-01-01T00:00:00'?'-':data.creationTime | DateTransformPipe">
              {{  data.creationTime == "1970-01-01T00:00:00"?'-':data.creationTime | DateTransformPipe}}</td>
            <td class="hidden-row "
              [title]="data.correctDate == '1970-01-01T00:00:00'?'-':data.correctDate | DateTransformPipe">
              {{  data.correctDate == "1970-01-01T00:00:00"?'-':data.correctDate | DateTransformPipe }}</td>
            <td
              [ngClass]="data.status == 3 ? 'common-table-status-green' : data.status == 2 ? 'common-table-status-orange': data.status == 1? 'common-table-status-red': data.status == 4 ? 'common-table-status-gray' :'common-table-status-red'">
              {{ data.status == 1 ? '整改中' : data.status == 2 ? '已整改' : data.status == 3 ? '已完成' : data.status == 4 ? '已撤销':'-'}}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div style="text-align: center">
      <nz-pagination [(nzPageIndex)]="nzPageIndex" [(nzPageSize)]="searchModel.maxResultCount" [(nzTotal)]="nzTotal"
        [nzShowTotal]="totalTemplate" (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper></nz-pagination>
      <ng-template #totalTemplate let-total>
        共{{nzTotal}}条
      </ng-template>
    </div>
  </div>
</div>

<!-- 弹窗 -->
<nz-modal class="inspection-records-modal" [(nzVisible)]="isModalVisible" [nzContent]="addModalContent" [nzWidth]="800"
  [nzMaskClosable]="false" [nzFooter]='null' (nzOnCancel)="closemodal()" [nzTitle]="printer">
  <ng-template #printer>
    <span>{{detailInfo.originStatus == 3?'检查通知单':'整改通知单'}}</span>
  </ng-template>
  <ng-template #addModalContent>
    <div class="inspection-records-list">
      <div class="inspection-records-title">
        <div class="inspection-records-title-no">编号：{{detailInfo.displayNumber}}</div>
        <div class="inspection-records-status"
          [ngClass]="detailInfo.status == 3 ? 'inspection-records-status-success' : 'inspection-records-status-error'">
          状态： {{detailInfo.status == 3? '已通过' : '未通过'}}</div>
      </div>
      <div class="inspection-records-detail">
        <div class="inspection-records-detail-item" nz-row>
          <div nz-col nzSpan="8">检查人：<span *ngFor="let person of detailInfo.checkUserNames">{{ person }} </span></div>
          <div nz-col nzSpan="8">
            性质：<span *ngFor="let item of detailInfo.securityChecksPropertyNames">{{item}}</span></div>
          <div nz-col nzSpan="8">
            检查日期：{{ detailInfo.creationTime == "1970-01-01T00:00:00"?'-':detailInfo.creationTime | DateTransformPipe }}
          </div>
        </div>
        <div class="inspection-records-detail-item" nz-row>
          <div nz-col nzSpan="8">检查项：{{detailInfo.content}}</div>
        </div>
      </div>
    </div>
    <div class="inspection-records-list">
      <div class="inspection-records-title">检查结果</div>
      <div class="inspection-records-detail">{{detailInfo.result}}</div>
    </div>
    <div class="inspection-records-list" *ngIf="detailInfo.attachments">
      <div class="inspection-records-title">附件</div>
      <div class="inspection-records-detail" *ngIf="annex.length !=0">

        <div class="img" *ngFor="let url of annexForImg"
          style="display:inline-block;padding:10px;margin-right: 10px;vertical-align: top;cursor: pointer;border-radius: 3px;">
          <img (click)='viewImg(url)' width="120px" height="120px" [src]='url' alt="">


        </div>
        <div *ngIf="annexForVideo.length !=0" class="video"
          style="padding:10px;display:inline-block;margin-right: 10px;vertical-align: top;cursor: pointer;border-radius: 3px;">
          <video controls="controls" height="120px" width="120px" *ngFor="let url of annexForVideo">
            <source [src]='url' [ngStyle]="{ 'width': '100%' }" type="video/mp4" />
          </video>
        </div>

      </div>
    </div>
    <div class="inspection-records-list">
      <div class="inspection-records-title">整改要求</div>
      <div class="inspection-records-detail">
        <div class="inspection-records-detail-item">{{detailInfo.correctContent || '-'}}</div>
        <div nz-row>
          <div nz-col nzSpan="8">通知人：<span *ngFor="let person of detailInfo.notifyUserNames">{{ person }}&nbsp;</span>
          </div>
          <div nz-col nzSpan="8">
            整改期限：{{detailInfo.correctDate == "1970-01-01T00:00:00"?'-':detailInfo.correctDate | DateTransformPipe}}
          </div>
          <div nz-col nzSpan="8">抄送人：<span *ngFor="let person of detailInfo.ccUserNames">{{ person }}&nbsp;</span><span
              *ngIf="detailInfo.correctCCUserNames == ''">-</span></div>
        </div>
      </div>
    </div>
    <div *ngFor="let item of detailInfo.checkAndFeedbacksList;  let i = index" class="inspection-records">
      <!-- <div  class="inspection-records-index"> <span  *ngFor="let idx of checkindex"> {{idx }} </span> </div> -->
      <div class="inspection-records-info">
        <div *ngIf="item.type == 1">
          <div class="inspection-records-top">
            <div>整改人：{{item.creatorUserName}}</div>
            <div class="inspection-records-status-img"
              [ngClass]="item.status == 2 ? 'inspection-records-status-success-img' : 'inspection-records-status-error-img'">
            </div>
          </div>
          <div class="inspection-records-bottom">
            <div>{{item.content}}</div>
            <div>{{item.creationTime == "1970-01-01T00:00:00"?'-':item.creationTime | DateTransformPipe}}</div>
          </div>
        </div>
        <div *ngIf="item.type == 2">
          <!-- <div *ngIf="item.type == 1" class="inspection-records-index">{{i}}</div> -->
          <div class="inspection-records-top">
            <div>复检人：{{item.creatorUserName}}</div>
          </div>
          <div class="inspection-records-bottom">
            <div>{{item.content}}</div>
            <div>{{item.creationTime == "1970-01-01T00:00:00"?'-':item.creationTime | DateTransformPipe}}</div>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
</nz-modal>


<!-- 预览 -->
<nz-modal nzWidth='70%' [nzVisible]="isviewImg" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="Cancel()">
  <ng-template #modalContent>
    <img [src]='curl' [ngStyle]="{ 'width': '100%' }" />
  </ng-template>
</nz-modal>